<%--
  Created by IntelliJ IDEA.
  User: MY PC
  Date: 2018/11/23
  Time: 15:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="common.jsp" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<div>
    <%--tab的案例--%>
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">标题一</li>
            <li>标题二</li>
            <li>标题三</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">内容1</div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
        </div>
        <hr class="layui-bg-orange">
        <button class="layui-btn" lay-submit lay-filter="login">登录</button>
    </div>
    <hr class="layui-bg-orange">
    <%--栅格的基础--%>
    <div class="layui-fluid">
        常规布局（以中型屏幕桌面为例）：
        <div class="layui-row">
            <div class="layui-col-md9 layui-bg-red">
                你的内容 9/12
            </div>
            <div class="layui-col-md3 layui-bg-orange">
                你的内容 3/12
            </div>
        </div>

        移动设备、平板、桌面端的不同表现：
        <div class="layui-row">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md4 layui-bg-green">
                移动：6/12 | 平板：6/12 | 桌面：4/12
            </div>
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md4 layui-bg-cyan">
                移动：6/12 | 平板：6/12 | 桌面：4/12
            </div>
            <div class="layui-col-xs4 layui-col-sm12 layui-col-md4 layui-bg-green">
                移动：4/12 | 平板：12/12 | 桌面：4/12
            </div>
            <div class="layui-col-xs4 layui-col-sm7 layui-col-md8 layui-bg-blue">
                移动：4/12 | 平板：7/12 | 桌面：8/12
            </div>
            <div class="layui-col-xs4 layui-col-sm5 layui-col-md4 layui-bg-black">
                移动：4/12 | 平板：5/12 | 桌面：4/12
            </div>
        </div>
        <%--栅格之间的间距--%>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md4 layui-bg-orange">
                1/3
            </div>
            <div class="layui-col-md4  layui-bg-cyan">
                1/3
            </div>
            <div class="layui-col-md4  layui-bg-green">
                1/3
            </div>
        </div>
        <%--栅格的列偏移--%>
        <div class="layui-row">
            <div class="layui-col-md4 layui-bg-black">
                4/12
            </div>
            <div class="layui-col-md4 layui-col-md-offset4 layui-bg-red">
                偏移4列，从而在最右
            </div>
        </div>
        <%--嵌套--%>
        <div class="layui-row layui-col-space5  layui-bg-red">
            <div class="layui-col-md5">
                <div class="layui-row grid-demo layui-bg-green">
                    <div class="layui-col-md3">
                        内部列
                    </div>
                    <div class="layui-col-md9">
                        内部列
                    </div>
                    <div class="layui-col-md12">
                        内部列
                    </div>
                </div>
            </div>
            <div class="layui-col-md7">
                <div class="layui-row grid-demo grid-demo-bg1 layui-bg-cyan">
                    <div class="layui-col-md12">
                        内部列
                    </div>
                    <div class="layui-col-md9">
                        内部列
                    </div>
                    <div class="layui-col-md3">
                        内部列
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr class="layui-bg-orange">
    <%--个性图标的使用--%>
    <div style="text-align: center">
        <ol>
            <li class="layui-icon layui-icon-face-smile" style="font-size: 20px; color: #1E9FFF;"> 你是1</li>
            <li class="layui-icon layui-icon-vercode" style="font-size: 20px; color: #1E9FFF;"> 你是2</li>
            <li class="layui-icon layui-icon-login-wechat" style="font-size: 20px; color: #1E9FFF;"> 你是3</li>
            <li class="layui-icon layui-icon-login-qq" style="font-size: 20px; color: #1E9FFF;"> 你是4</li>
            <li class="layui-icon layui-icon-cellphone" style="font-size: 20px; color: #1E9FFF;"> 你是4</li>
        </ol>
    </div>
    <hr class="layui-bg-orange">
    <%--动画的使用--%>
    <div>
        其中 layui-anim 是必须的，后面跟着的即是不同的动画类
        <div class="layui-anim layui-anim-up"></div>
        <div class="layui-anim layui-anim-upbit"></div>
        <div class="layui-anim layui-anim-scale"></div>
        <div class="layui-anim layui-anim-scaleSpring"></div>

        循环动画，追加：layui-anim-loop
        <div class="layui-anim layui-anim-up layui-anim-loop"></div>
    </div>
    <hr class="layui-bg-orange">
    <%--按钮的使用--%>
    <div>
        <button class="layui-btn  layui-btn-primary layui-btn-lg  layui-btn-radius">
            <i class="layui-icon">&#xe608;</i> 添加-原始
        </button>
        <button class="layui-btn  layui-btn-normal layui-btn-sm  layui-btn-radius">百搭</button>
        <button class="layui-btn  layui-btn-warm layui-btn-xs  layui-btn-radius">暖色</button>
        <button class="layui-btn  layui-btn-danger">警告</button>
        <button class="layui-btn  layui-btn-disabled">禁用</button>
        <a href="http://www.layui.com" class="layui-btn layui-btn-radius" target="_blank">默认</a><br><br>
        <button class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>
        <br><br>
        <div class="layui-btn-group">
            <button class="layui-btn">增加</button>
            <button class="layui-btn">编辑</button>
            <button class="layui-btn">删除</button>
        </div>

        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe654;</i>
            </button>
            <button class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe642;</i>
            </button>
            <button class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe640;</i>
            </button>
            <button class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe602;</i>
            </button>
        </div>

        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon">&#xe654;</i>
            </button>
            <button class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon">&#xe642;</i>
            </button>
            <button class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon">&#xe640;</i>
            </button>
        </div>
    </div>
    <hr class="layui-bg-orange">
    <%--表单的使用--%>
    <div>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名<span style="color: red"> *</span></label>
                <div class="layui-input-block">
                    <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码框<span style="color: red"> *</span></label>
                <div class="layui-input-inline">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">只能包含字母或数字</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">选择框<span style="color: red"> *</span></label>
                <div class="layui-input-block">
                    <select name="city" lay-verify="required">
                        <option value="">-请选择城市-</option>
                        <option value="0">北京</option>
                        <%--禁用效果--%>
                        <option value="1" disabled>上海</option>
                        <option value="2">广州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                    </select>
                    <%--select的分组功能--%>
                    <select name="quiz">
                        <option value="">-请选择密保问题-</option>
                        <optgroup label="城市记忆">
                            <option value="你工作的第一个城市">你工作的第一个城市？</option>
                        </optgroup>
                        <optgroup label="学生时代">
                            <option value="你的工号">你的工号？</option>
                            <option value="你最喜欢的老师">你最喜欢的老师？</option>
                        </optgroup>
                    </select>
                    <%--搜索匹配--%>
                    <select name="city" lay-verify="" lay-search>
                        <option value="">-搜索匹配-</option>
                        <option value="010">layer</option>
                        <option value="021">form</option>
                        <option value="0571">layim</option>
                        ……
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">复选框</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="like[write]" title="写作">
                    <input type="checkbox" name="like[read]" title="默认选择" checked>
                    <%--禁用--%>
                    <input type="checkbox" name="like[dai]" title="禁用" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">开关</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="switch" lay-skin="switch">
                    <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
                    <input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
                    <%--禁用--%>
                    <input type="checkbox" name="aaa" lay-skin="switch" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">单选框</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男">
                    <input type="radio" name="sex" value="女" title="女" checked>
                    <input type="radio" name="sex" value="" title="中性" disabled>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">文本域</label>
                <div class="layui-input-block">
                    <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <%--组装行内表单--%>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">范围</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="password" name="" autocomplete="off" class="layui-input">
                    </div>
                </div>

            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

        <script>
            //Demo
            layui.use('form', function () {
                var form = layui.form;

                //监听提交
                form.on('submit(formDemo)', function (data) {
                    layer.msg(JSON.stringify(data.field));
                    return false;
                });
            });
        </script>
    </div>
    <hr class="layui-bg-orange">
    <%--导航栏的使用--%>
    <div>
        <ul class="layui-nav layui-bg-blue" lay-filter="">
            <li class="layui-nav-item"><a href="">最新活动</a></li>
            <li class="layui-nav-item"><a href="">产品</a></li>
            <%-- layui-this 指定默认的被选中--%>
            <li class="layui-nav-item  layui-this"><a href="">大数据</a></li>
            <li class="layui-nav-item"><a href="">社区</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">解决方案</a>
                <dl class="layui-nav-child"> <!-- 二级菜单 -->
                    <dd><a href="">移动模块</a></dd>
                    <dd><a href="">后台模版</a></dd>
                    <dd><a href="">电商平台</a></dd>
                </dl>
            </li>
        </ul>
        <hr class="layui-bg-orange">
        <ul class="layui-nav layui-bg-green">
            <li class="layui-nav-item">
                <a href="">控制台<span class="layui-badge">9</span></a>
            </li>
            <li class="layui-nav-item">
                <a href="">个人中心<span class="layui-badge-dot"></span></a>
            </li>
            <li class="layui-nav-item">
                <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我的</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">修改信息</a></dd>
                    <dd><a href="javascript:;">安全管理</a></dd>
                    <dd><a href="javascript:;">退出登录</a></dd>
                </dl>
            </li>
        </ul>
        <hr class="layui-bg-orange">
        <%--侧边导航栏,占领左侧的整个页面--%>
        <%--<ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="test">--%>
        <%--垂直导航栏--%>
        <%--lay-shrink="all" 展开子菜单时，是否收缩兄弟节点已展开的子菜单--%>
        <ul class="layui-nav layui-nav-tree" lay-filter="test" lay-shrink="all">
            <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
            <li class="layui-nav-item layui-nav-itemed">
                <a href="javascript:;">默认展开</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">选项1</a></dd>
                    <dd><a href="javascript:;">选项2</a></dd>
                    <dd><a href="">跳转</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">解决方案</a>
                <dl class="layui-nav-child">
                    <dd><a href="">移动模块</a></dd>
                    <dd><a href="">后台模版</a></dd>
                    <dd><a href="">电商平台</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">产品</a></li>
            <li class="layui-nav-item"><a href="">大数据</a></li>
        </ul>
        <hr class="layui-bg-orange">
        <%--面包屑--%>
        <span class="layui-breadcrumb">
          <a href="">首页</a>
          <a href="">国际新闻</a>
          <a href="">亚太地区</a>
          <a><cite>正文</cite></a>
        </span><br><br>
        <%--自定义分隔符,也可以作为小导航栏来使用--%>
        <span class="layui-breadcrumb" lay-separator="|">
            <a href="">娱乐</a>
            <a href="">八卦</a>
            <a href="">体育</a>
            <a href="">搞笑</a>
            <a href="">视频</a>
            <a href="">游戏</a>
            <a href="">综艺</a>
        </span>
        <script>
            //注意：导航 依赖 element 模块，否则无法进行功能性操作
            layui.use('element', function () {
                var element = layui.element;

                //…
            });
        </script>
    </div>
    <hr class="layui-bg-orange">
    <%--Tab选项卡 - 页面元素--%>
    <div>
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li>网站设置</li>
                <%--layui-this 是否默认选中--%>
                <li class="layui-this">用户管理</li>
                <li>权限分配</li>
                <li>商品管理</li>
                <li>订单管理</li>
            </ul>
            <div class="layui-tab-content">
                <%-- layui-show是否显示内容--%>
                <div class="layui-tab-item layui-show">内容1</div>
                <div class="layui-tab-item">内容2</div>
                <div class="layui-tab-item">内容3</div>
                <div class="layui-tab-item">内容4</div>
                <div class="layui-tab-item">内容5</div>
            </div>
        </div>
        <hr class="layui-bg-orange">
        <%--不同风格--%>
        <div class="layui-tab  layui-tab-card" lay-filter="docDemoTabBrief">
            <%--<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">--%>
            <ul class="layui-tab-title">
                <li class="layui-this">网站设置</li>
                <li>用户管理</li>
                <li>权限分配</li>
                <li>商品管理</li>
                <li>订单管理</li>
            </ul>
            <div class="layui-tab-content">
                <%-- layui-show是否显示内容--%>
                <div class="layui-tab-item layui-show">内容1</div>
                <div class="layui-tab-item">内容2</div>
                <div class="layui-tab-item">内容3</div>
                <div class="layui-tab-item">内容4</div>
                <div class="layui-tab-item">内容5</div>
            </div>
        </div>
        <hr class="layui-bg-orange">
        <%--lay-allowClose="true" 允许tab被关闭--%>
        <div class="layui-tab" lay-allowClose="true">
            <ul class="layui-tab-title">
                <li class="layui-this">网站设置</li>
                <li>用户基本管理</li>
                <li>权限分配</li>
                <li>全部历史商品管理文字长一点试试</li>
                <li>订单管理</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">1</div>
                <div class="layui-tab-item">2</div>
                <div class="layui-tab-item">3</div>
                <div class="layui-tab-item">4</div>
                <div class="layui-tab-item">5</div>
                <div class="layui-tab-item">6</div>
            </div>
        </div>
        <hr class="layui-bg-orange">
        <div class="layui-tab" lay-filter="test1">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="111">文章列表</li>
                <li lay-id="222">发送信息</li>
                <li lay-id="333">权限分配</li>
                <li lay-id="444">审核</li>
                <li lay-id="555">订单管理</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">1</div>
                <div class="layui-tab-item">2</div>
                <div class="layui-tab-item">3</div>
                <div class="layui-tab-item">4</div>
                <div class="layui-tab-item">5</div>
            </div>
        </div>

        <script>
            //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
            layui.use('element', function () {
                var element = layui.element;
                //…
            });
        </script>
    </div>
    <hr class="layui-bg-orange">
    <%--进度条 - 页面元素--%>
    <div>
        <div class="layui-progress">
            <div class="layui-progress-bar" lay-percent="20%"></div>
        </div>
        <br>
        <%--lay-showPercent="true" 显示百分比的文本--%>
        <div class="layui-progress layui-progress-big" lay-showPercent="true">
            <div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
        </div>
        <br>
        <div class="layui-progress layui-progress-big" lay-showPercent="yes">
            <div class="layui-progress-bar layui-bg-blue" lay-percent="1/2"></div>
        </div>
        <br>
        <div class="layui-progress layui-progress-big">
            <div class="layui-progress-bar" lay-percent="20%"></div>
        </div>
        <br>
        <div class="layui-progress layui-progress-big" lay-showPercent="true">
            <div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
        </div>
        <br>
        <div class="layui-progress layui-progress-big" lay-showPercent="true">
            <div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
        </div>
        <script>
            //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
            layui.use('element', function () {
                var element = layui.element;
            });
        </script>
    </div>
    <hr class="layui-bg-orange">
    <%--面板 - 页面元素--%>
    <div>
        <div class="layui-card">
            <div class="layui-card-header">卡片面板</div>
            <div class="layui-card-body">
                卡片式面板面板通常用于非白色背景色的主体内<br>
                从而映衬出边框投影
            </div>
        </div>
        <div class="layui-collapse" lay-accordion>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">杜甫</h2>
                <div class="layui-colla-content">内容区域</div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">李清照</h2>
                <div class="layui-colla-content layui-show">内容区域</div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">鲁迅</h2>
                <div class="layui-colla-content">内容区域</div>
            </div>
        </div>
        <script>
            //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
            layui.use('element', function () {
                var element = layui.element;

                //…
            });
        </script>
    </div>
    <hr class="layui-bg-orange">
    <%--表格 - 页面元素--%>
    <div>
        <table class="layui-table" lay-size="sm">
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>昵称</th>
                <th>加入时间</th>
                <th>签名</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>贤心</td>
                <td>2016-11-29</td>
                <td>人生就像是一场修行</td>
            </tr>
            <tr>
                <td>许闲心</td>
                <td>2016-11-28</td>
                <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
            </tr>
            </tbody>
        </table>
    </div>
    <hr class="layui-bg-orange">
    <%--徽章--%>
    <div>
        小圆点，通过 layui-badge-dot 来定义，里面不能加文字<br><br>
        <span class="layui-badge-dot"></span>
        <span class="layui-badge-dot layui-bg-orange"></span>
        <span class="layui-badge-dot layui-bg-green"></span>
        <span class="layui-badge-dot layui-bg-cyan"></span>
        <span class="layui-badge-dot layui-bg-blue"></span>
        <span class="layui-badge-dot layui-bg-black"></span>
        <span class="layui-badge-dot layui-bg-gray"></span>
        椭圆体，通过 layui-badge 来定义。事实上我们把这个视作为主要使用方式
        <br><br>
        <span class="layui-badge">6</span>
        <span class="layui-badge">99</span>
        <span class="layui-badge">61728</span>
        <br><br>
        <span class="layui-badge">赤</span>
        <span class="layui-badge layui-bg-orange">橙</span>
        <span class="layui-badge layui-bg-green">绿</span>
        <span class="layui-badge layui-bg-cyan">青</span>
        <span class="layui-badge layui-bg-blue">蓝</span>
        <span class="layui-badge layui-bg-black">黑</span>
        <span class="layui-badge layui-bg-gray">灰</span><br><br>
        边框体，通过 layui-badge-rim 来定义
        <br><br>
        <span class="layui-badge-rim">6</span>
        <span class="layui-badge-rim">Hot</span>
        <br><br>
        <button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
        <button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button>
        <br><br>
        <ul class="layui-nav" style="text-align: right;"><%--小Tips：这里有没有发现，设置导航靠右对齐（或居中对齐）其实非常简单--%>
            <li class="layui-nav-item">
                <a href="">控制台<span class="layui-badge">9</span></a>
            </li>
            <li class="layui-nav-item">
                <a href="">个人中心<span class="layui-badge-dot"></span></a>
            </li>
        </ul>
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">网站设置</li>
                <li>用户管理<span class="layui-badge-dot"></span></li>
                <li>最新邮件<span class="layui-badge">99+</span></li>
            </ul>
            <div class="layui-tab-content"></div>
        </div>
    </div>
    <hr class="layui-bg-orange">
    <%--时间线--%>
    <div>
        <ul class="layui-timeline">
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">8月18日</h3>
                    <p>
                        layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
                        <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
                        <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
                    </p>
                </div>
            </li>
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">8月16日</h3>
                    <p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
                    <ul>
                        <li>《登高》</li>
                        <li>《茅屋为秋风所破歌》</li>
                    </ul>
                </div>
            </li>
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">8月15日</h3>
                    <p>
                        中国人民抗日战争胜利72周年
                        <br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
                        <br>铭记、感恩
                        <br>所有为中华民族浴血奋战的英雄将士
                        <br>永垂不朽
                    </p>
                </div>
            </li>
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">过去</div>
                </div>
            </li>
        </ul>
    </div>
    <hr class="layui-bg-orange">
    <%--简单辅助元素 - 页面元素--%>
    <div>
        <blockquote class="layui-elem-quote">引用区域的文字</blockquote>
        <blockquote class="layui-elem-quote layui-quote-nm">引用区域的文字</blockquote>

        <fieldset class="layui-elem-field">
            <legend>字段集区块 - 默认风格</legend>
            <div class="layui-field-box">
                内容区域
            </div>
        </fieldset>

        <fieldset class="layui-elem-field layui-field-title">
            <legend>字段集区块 - 横线风格</legend>
            <div class="layui-field-box">
                内容区域
            </div>
        </fieldset>
        你可以把它看作是一个有标题的横线
        默认分割线
        <hr class="layui-bg-orange">

        赤色分割线
        <hr class="layui-bg-red">

        橙色分割线
        <hr class="layui-bg-orange">

        墨绿分割线
        <hr class="layui-bg-green">

        青色分割线
        <hr class="layui-bg-cyan">

        蓝色分割线
        <hr class="layui-bg-blue">

        黑色分割线
        <hr class="layui-bg-black">

        灰色分割线
        <hr class="layui-bg-gray">
    </div>
</div>
</body>
<script>
    //【增】：向test表插入一个nickname字段，如果该表不存在，则自动建立。
    layui.data('test', {
        key: 'nickname'
        , value: '贤心'
    });

    //【删】：删除test表的nickname字段
    // layui.data('test', {
    //     key: 'nickname'
    //     ,remove: true
    // });
    // layui.data('test', null); //删除test表

    //【改】：同【增】，会覆盖已经存储的数据

    //【查】：向test表读取全部的数据
    var localTest = layui.data('test');
    console.log(localTest.nickname); //获得“贤心”
</script>

<script>
    <%--设备信息获取--%>
    var device = layui.device();
    console.log(device)
</script>
</html>
